/*======================================================================================================*\

	
					 prCSSit - a CSS framework for printing websites.
					-------------------------------------------------
		
				Author:		John Przeslakowski
				Author URL:	http://blog.przeslakowski.com/
				URL:		http://code.google.com/p/prcssit-css-print-framework/
				License:	GPL v3
				Version:	0.2b
				Date:		10/12/2011


	USAGE:
	
		Just include this extra line of code:
		
			<link href="prcssit/style.css" rel="stylesheet" type="text/css" media="print" />
		
		You can also use a few built-in classes, by adding them to your <body> tag.
		Here is a list:
		
		+===========================+===========================================================+
		|	Class					|	Action													|
		+===========================+===========================================================+
		|	.print-serif			|	Prints page in serif font (Georgia, Times, etc.).		|
		+---------------------------+-----------------------------------------------------------+
		|	.print-sans-serif		|	Prints page in sans-serif font (Helvetica, Arial).		|															|
		+---------------------------+-----------------------------------------------------------+
		|	.print-clear-columns	|	Clears float values from all <div> tags contained		|
		|							|	within the <body> tag.									|
		+---------------------------+-----------------------------------------------------------+
		|	.print-show-links		|	Adds the :after pseudo-class to all <a> tags with		|
		|							|	href attribute used as a source.						|
		+---------------------------+-----------------------------------------------------------+
		|	.print-hide-common		|	Hides commonly used elements, such as:					|
		|							|															|
		|							|		<header>											|
		|							|		<hgroup>											|
		|							|		<footer>											|
		|							|		<nav>												|
		|							|		#header												|
		|							|		#footer												|
		|							|		#nav												|
		|							|		#navigation											|
		|							|		#sidebar											|
		|							|		#menu												|
		|							|															|
		+---------------------------+-----------------------------------------------------------+
		|	.print-hide-forms		|	Hides all forms on the page. (<form> and <fieldset>).	|
		+---------------------------+-----------------------------------------------------------+
		|	.print-as-thumbnails	|	Creates a gallery of thumbnails floated to the left.	|
		|							|	In order to use this class, wrap all images in a <div>.	|
		+---------------------------+-----------------------------------------------------------+
		|	.print-align-left		|	Aligns an image to the left.							|
		+---------------------------+-----------------------------------------------------------+
		|	.print-align-right		|	Aligns an image to the right.							|
		+---------------------------+-----------------------------------------------------------+
		|	.print-align-center		|	Centers an image.										|
		+---------------------------+-----------------------------------------------------------+
		
	
	TODO:
	
		* Ensure cross-browser compatibility (works best in WebKit)
		
	KNOWN BUGS:
		
		* Line height and images are are sometimes messed up in Opera
		* @page rule is supported only in WebKit
	
	RELEASE HISTORY
	
		* For release history, please visit my blog at: http://blog.przeslakowski.com/
	
\*======================================================================================================*/

@import url('reset.css');

/*======================================================================================================*\
	Set margins for different page sizes
\*======================================================================================================*/
/* A5 */
@media print and (max-width: 14.8cm) and (max-height: 21cm) and (orientation: portrait) {
	@page:left {
		margin: 1cm 1.5cm 1.5cm 1cm;
	}
	@page:right {
		margin: 1cm 1cm 1.5cm 1.5cm;
	}
}
/* A4 and A3 */
@media print and (max-width: 29.7cm) and (max-height: 42cm) and (orientation: portrait) {
	@page:left {
		margin: 2cm 3cm 3cm 2cm;
	}
	@page:right {
		margin: 2cm 2cm 3cm 3cm;
	}
}
/*======================================================================================================*\
	Apply some styling to regular tags		
\*======================================================================================================*/
html, body { background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
@media screen {
	body { max-width: 1280px; margin: 50px; }
}
body, p { line-height: 150%; }
p { margin: 0 0 1em 0; }
a { border-bottom: dotted 1pt #ccc; color: #39F; text-decoration: none; }
sup, sub { font-size: smaller; vertical-align: super; }
sub { vertical-align: sub; }
/*======================================================================================================*\
	Images
\*======================================================================================================*/
img { border: solid 1px #000; display: block; page-break-inside: avoid; padding: 0; }
img.print-align-center { clear: both; float: none; margin: 0 auto 1em; }
img, img.print-align-left { float: left; margin: 0 1em 1em 0; }
img.print-align-right { float: right; margin: 0 0 1em 1em; }
/*======================================================================================================*\
	Headers
\*======================================================================================================*/
h1, h2, h3, h4, h5, h6 { clear: both; letter-spacing: normal; line-height: 1em; page-break-after: avoid; page-break-before: auto; }
h1 { font-size: 300%; line-height: 300%; margin-bottom: -0.75em; margin-top: -1em; }
h2 { font-size: 200%; line-height: 200%; margin-top: -0.25em; }
h3 { font-size: 150%; line-height: 150%; margin-bottom: 0.5em; }
h4 { font-size: 125%; line-height: 125%; margin-bottom: 1em; margin-top: 1.25em; }
h5 { font-size: 110%; line-height: 110%; margin-bottom: 1.2em; margin-top: 1.5em; }
h6 { font-size: 80%; line-height: 80%; margin-bottom: 2em; margin-top: 2.5em; }
/*======================================================================================================*\
	Lists
\*======================================================================================================*/
ul, ol, ul li, ol li { margin-left: 1em; }
ol li { list-style-type: decimal; }
ul li { list-style-type: disc; }
hr { border: 0; border-bottom: solid 1pt #ccc; height: 1pt; }
/*======================================================================================================*\
	Forms
\*======================================================================================================*/
fieldset { border: solid 1pt #ccc; border-radius: 0.5em; margin: 1em; padding: 1em; }
fieldset legend { padding: 0 0.5em; font-size: 150% }
label { color: #666; display: block; font-size: 80%; margin: 0; }
/*======================================================================================================*\
	Inputs
\*======================================================================================================*/
input[type="tel"], input[type="search"], input[type="url"], input[type="email"], input[type="datetime"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"], textarea { border: solid 1pt #999; color: #666; padding: 0.25em; }
select { border: solid 1pt #999; color: #666; }
input[type="button"], input[type="reset"], input[type="submit"], button, .button { font-family: Arial, Helvetica, sans-serif; font-size: 120%; font-weight: bold; padding: 0.5em 1em; }
/*======================================================================================================*\
	Tables
\*======================================================================================================*/
table { margin: 0 0 1em 0; width: 80% }
td, th { border-bottom: solid 1pt #000; padding: 0.25em; }
th, thead td { border-bottom: solid 3pt #000; font-size: 120%; font-weight: bold; text-align: left; }
code, pre { border-left: solid 1pt #ccc; font-family: "Courier New", Courier, monospace !important; display: block; margin: 1em; max-width: 80%; padding-left: 1em; white-space: pre-wrap; white-space: -moz-pre-wrap; /* FF */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ }
/*======================================================================================================*\
	Misc
\*======================================================================================================*/
blockquote, q { border-left: solid 1pt #ccc; display: block; font-size: 120%; font-weight: bold; margin-left: 0.65em; max-width: 80%; padding: 1em; quotes: none; }
blockquote p { margin-left: 1em; margin-right: 5em; }
blockquote:before, q:before { color: #999; content: "\201C"; font-size: 300%; }
blockquote:after, q:after { content:" \2014\0000a0" attr(cite); display: block; font-size: 100%; font-style: italic; font-weight: normal; text-align: right; }
blockquote, blockquote:before, code, fieldset, form, ol, pre, q:before, table, ul { page-break-inside: avoid; }
/*======================================================================================================*\
	Some additional classes for your convenience
\*======================================================================================================*/
.print-clear-columns div, .print-clear-columns article, .print-clear-columns aside, .print-clear-columns figure, .print-clear-columns header, .print-clear-columns hgroup, .print-clear-columns footer, .print-clear-columns nav, .print-clear-columns section { float: none; width: 100%; }
.print-show-links a:after { content:" [" attr(href) "]"; font-size: 80%; color: #999; text-decoration: none; page-break-after: always; }
.print-hide-common header, .print-hide-common #header, .print-hide-common hgroup, .print-hide-common footer, .print-hide-common #footer, .print-hide-common nav, .print-hide-common #nav, .print-hide-common #navigation, .print-hide-common #sidebar, .print-hide-common #menu, .print-hide-forms fieldset, .print-hide-forms form { display: none; }
.print-block-images img { clear: both; }
.print-serif, .print-serif *, .print-sans-serif h1, .print-sans-serif h2, .print-sans-serif h3, .print-sans-serif h4, .print-sans-serif h5, .print-sans-serif h6, .print-sans-serif fieldset legend { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
.print-sans-serif, .print-sans-serif *, .print-serif h1, .print-serif h2, .print-serif h3, .print-serif h4, .print-serif h5, .print-serif h6, .print-serif fieldset legend { font-family: Arial, Helvetica, sans-serif; }
.print-as-thumbnails { page-break-inside: avoid; }
.print-as-thumbnails img { float: left; height: auto; margin-right: 1%; width: 19%; }
.print-as-thumbnails img:nth-of-type(5) { margin-right: 0; }
.print-as-thumbnails img:nth-of-type(6) { clear: left; }
.print-as-thumbnails:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }